<template>
	<view :class="$tm.vx.state().tmVuetify.black?'black bk':''">
		<tm-menubars title="tm-pullBottom" color="bg-gradient-primary-lighten" :showback="true"></tm-menubars>

		<tm-tabs :shadow="24" v-model="actveIndex" :list="list"></tm-tabs>
		<tm-pullBottom v-if="actveIndex == 0" :height="1200" :loading.sync="loading" @refresh="getdata">
			<view v-if="testData == 0" class="flex-center pa-24 mt-24">默认刷新，下拉测试</view>
			<tm-listitem border :shadow="0" :title="String(item)" v-for="(item, index) in testData" :key="index"></tm-listitem>
		</tm-pullBottom>
		<tm-pullBottom v-if="actveIndex == 1" :height="1200" :loading.sync="loading" @refresh="getdata">
			<template v-slot:pull>
				<tm-images :width="50" src="http://jx2d.cn/uniapp/static/logo_great.png"></tm-images>
				<view class="text-size-xs text-grey">继续下拉</view>
			</template>
			<template v-slot:pullReresh>
				<tm-images :width="50" src="http://jx2d.cn/uniapp/static/logo_great.png"></tm-images>
				<view class="text-size-xs text-grey">可以松手啦</view>
			</template>
			<template v-slot:default>
				<tm-empty model="refresh"></tm-empty>
			</template>
		</tm-pullBottom>
		<tm-pullBottom v-if="actveIndex == 2" :height="1200" :loading.sync="loading" @refresh="getdata">
			<template v-slot:pull>
				<view class="text-size-xs text-grey">继续下拉</view>
			</template>
			<template v-slot:pullReresh>
				<view class="text-size-xs text-grey">可以松手啦</view>
			</template>
			<template v-slot:default>
				<tm-empty model="refresh"></tm-empty>
			</template>
		</tm-pullBottom>
		
		<view style="height: 500upx;"></view>
	</view>
</template>

<script>
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmButton from "@/tm-vuetify/components/tm-button/tm-button.vue"
	import tmPullBottom from "@/tm-vuetify/components/tm-pullBottom/tm-pullBottom.vue"
	import tmImages from "@/tm-vuetify/components/tm-images/tm-images.vue"
	import tmEmpty from "@/tm-vuetify/components/tm-empty/tm-empty.vue"
	import tmListitem from "@/tm-vuetify/components/tm-listitem/tm-listitem.vue"
	import tmTabs from "@/tm-vuetify/components/tm-tabs/tm-tabs.vue"
	export default {
		components:{tmFullView,tmMenubars,tmSheet,tmButton,tmPullBottom,tmImages,tmEmpty,tmListitem,tmTabs},
	data() {
		return {
			actveIndex: 0,
			list: ['默认刷新', '自定刷新', '个性化'],
			loading: false,
			testData: 0
		};
	},
	methods: {
		getdata(e) {
			if (e == 'pull') {
				this.loading = false;
				this.testData = 24;
				uni.$tm.toast('下拉刷新');
			}
			if (e == 'bottom') {
				this.loading = false;
				this.testData = 24;
				uni.$tm.toast('触底刷新');
			}
		}
	}
};
</script>

<style></style>
